﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载图层控件（自定义）</title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <script src="js/jquery.js"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
</head>
<body>
    <div class="ToolLib">
        <input type="button" class="ButtonLib" id="zoom-out" value="单击缩小" />
        <input type="button" class="ButtonLib" id="zoom-in" value="单击放大" />
        <input type="button" class="ButtonLib" id="panto" value="平移到【武汉】" />
        <input type="button" class="ButtonLib" id="restore" value="复位" />
    </div>
    <div id="map">
    </div>
    <script type="text/javascript">

        var map = initMap();


        //地图视图的初始参数
        var view = map.getView();
        var zoom = view.getZoom();
        var center = view.getCenter();
        var rotation = view.getRotation();

        //单击缩小按钮功能
        document.getElementById('zoom-out').onclick = function () {
            //获取地图视图
            var view = map.getView();
            //获得当前缩放级数
            var zoom = view.getZoom();
            //地图缩小一级
            view.setZoom(zoom - 1);
        };
        //单击放大按钮功能
        document.getElementById('zoom-in').onclick = function () {
            //获取地图视图
            var view = map.getView();
            //获得当前缩放级数
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
            //地图放大一级
        };

        //平移功能（移到到武汉市）
        document.getElementById('panto').onclick = function () {
            //获取地图视图
            var view = map.getView();
            var wh = [105, 35];
            //平移地图
            view.setCenter(wh);
            view.setZoom(5);
        };
        //复位功能（复位到初始状态）
        document.getElementById('restore').onclick = function () {
            //初始中心点
            view.setCenter(center);
            //初始旋转角度
            view.setRotation(rotation);
            //初始缩放级数
            view.setZoom(zoom);
        };

    </script>
</body>
</html>
